<template>
  <el-dialog
    title="查看活动地址"
    :model-value="modelValue"
    :modal-append-to-body="false"
    :destroy-on-close="true"
    center
    :before-close="mapFn.closePopup"
    width="50%"
  >
    <div id="container" style="width: 100%; height: 100%"></div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="mapFn.closePopup">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { reactive, nextTick, watchEffect } from "vue";

export default {
  name: "seeAddress",
  components: {},
  setup(props, content) {
    // 默认数据备份，以便重置或恢复
    const { $data: mapData, $fn: mapFn } = initData(props, content);

    watchEffect(() => {
      if (props.modelValue) {
        mapFn.initMap();
      }
    });

    return {
      mapData,
      mapFn,
      modelValue: props.modelValue,
      mapUrl: props.mapUrl,
      latitude: props.latitude,
      longitude: props.longitude,
    };
  },
  props: {
    modelValue: Boolean,
    mapUrl: String,
    latitude: String,
    longitude: String,
  },
};

function initData(props, content) {
  const TMap = window.TMap;

  const $data = reactive({
    latLng: {
      lat: 39.984104,
      lng: 116.307503,
    },
  });
  let backup = {
    id: null,
    paths: null,
    position: null,
  };
  const $fn = {
    initMap() {
      console.log("初始化地图");

      $data.latLng.lat = props.latitude;
      $data.latLng.lng = props.longitude;

      nextTick(() => {
        let center = new TMap.LatLng($data.latLng.lat, $data.latLng.lng);
        console.log("center:" + center);
        let map = new TMap.Map("container", {
          zoom: 16, // 设置地图缩放级别
          center: center, // 设置地图中心点坐标
        });

      // 初始化几何图形
      let { marker, polygon, circle, rectangle, ellipse } = $fn.initGeometry(map);
      
      });
      console.log("地图初始化完成");
    },
    // 初始化图形绘画层
    initGeometry(map) {
      // 点绘画层
      let markerParams = {
        map,
      };
      if (!!$data.latLng) {
        markerParams["geometries"] = [
          {
            position: new TMap.LatLng($data.latLng.lat, $data.latLng.lng),
          },
        ];
      }
      let marker = {
        id: "marker",
        name: "标点",
        overlay: new TMap.MultiMarker(markerParams),
      };
      return {
        marker,
        polyline,
        polygon,
        circle,
        rectangle,
        ellipse,
      };
    },
    closePopup() {
      content.emit("update:modelValue", false);
    },
  };
  return {
    $fn,
  };
}
</script>